import React from 'react'
import style from './ProductIntro.module.css'
import { Typography, Carousel, Image, Rate, Table } from 'antd'
import { ColumnsType } from 'antd/es/table' // 表格组件列配置的类型定义

// 传参数据类型
interface PropsType {
  title: string,
  shortDescription: string,
  price: string | number,
  coupons: string,
  points: string,
  discount: string,
  rating: string | number,
  pictures: string[]
}

// 列配置
const columns: ColumnsType<RowType> = [
  {
    title: "title",
    dataIndex: "title",
    key: "title",
    align: "left",
    width: 120
  },
  {
    title: "description",
    dataIndex: "description",
    key: "description",
    align: "center"
  }
]

// 行数据配置
// 类型定义
interface RowType {
  title: string,
  description: string | number | JSX.Element,
  key: number
}

// 类型: 函数式组件 泛型: PropsType
export const ProductIntro: React.FC<PropsType> = ({
  title,
  shortDescription,
  price,
  coupons,
  points,
  discount,
  rating,
  pictures
}) => {

  // 表格数据
  const tableDataSource: RowType[] = [
    {
      key: 0,
      title: "路线名称",
      description: title,
    },
    {
      key: 1,
      title: "价格",
      description: (
        <>
          ¥{" "}
          <Typography.Text type="danger" strong>
            {price}
          </Typography.Text>
        </>
      ),
    },
    {
      key: 2,
      title: "限时抢购折扣",
      description: discount ? (
        <>
          ¥ <Typography.Text delete>{price}</Typography.Text>{" "}
          <Typography.Text type="danger" strong>
            ¥ {discount}
          </Typography.Text>
        </>
      ) : (
        "暂无折扣"
      ),
    },
    {
      key: 2,
      title: "领取优惠",
      description: coupons ? discount : "无优惠券可领",
    },
    {
      key: 2,
      title: "线路评价",
      description: (
        <>
          <Rate allowHalf defaultValue={+rating} />
          <Typography.Text style={{ marginLeft: 10 }}>
            {rating} 星
          </Typography.Text>
        </>
      ),
    }
  ]

  return (
    <div className={style['intro-container']}>
      {/* 商品标题 */}
      <Typography.Title level={4}>{title}</Typography.Title>
      {/* 商品简介 */}
      <Typography.Text>{shortDescription}</Typography.Text>
      {/* 产品评价与价格细节 */}
      <div className={style['intro-detail-content']}>
        {/* 价格 */}
        <Typography.Text style={{marginLeft: 20}}>
          ￥<span className={style['intro-detail-strong-text']}>{price}</span>人/起
        </Typography.Text>
        {/* 评分 */}
        <Typography.Text style={{marginLeft: 50}}>
          <span className={style['intro-detail-strong-text']}>{rating}</span>分
        </Typography.Text>
      </div>
      {/* 图片轮播 */}
      {/* slidesToShow: 多少幻灯片展示在同一个框架 */}
      <Carousel autoplay slidesToShow={3}>
        {
          pictures.map(p => (
            <Image height={150} src={p}></Image>
          ))
        }
      </Carousel>
      {/* 详细信息 */}
      {/* antd表格列配置可以从antd中引入定义antd/es/table */}
      {/* columns会报错,需要将行列数据连接在一起,将RowType泛型赋给列数据columns */}
      {/* 给Table组件RowType泛型,即可形成TS强类型定义 */}
      <Table<RowType> 
        dataSource={tableDataSource} 
        columns={columns}
        size='small'
        bordered={false}
        pagination={false}
      ></Table>
    </div>
  )
}